<template>
  <div class="device-detail-wrapper">
    <vm-common-header :pageTitle="pageTitle" :goBack="goBack"></vm-common-header>
    <div class="device-detail-info">
      <ul>
        <li class="info-item clearfix align-right">
          <div class="name">设备编号</div>
          <div class="value">{{deviceInfo.code}}</div>
        </li>
        <li class="info-item clearfix align-right">
          <div class="name">设备名称</div>
          <div class="value">{{deviceInfo.name}}</div>
        </li>
        <li class="info-item clearfix align-right">
          <div class="name">设备状态</div>
          <div class="value">{{deviceInfo.status}}</div>
        </li>
        <li class="info-item clearfix align-right">
          <div class="name">所属项目</div>
          <div class="value">{{deviceInfo.project}}</div>
        </li>
        <li class="info-item clearfix align-right">
          <div class="name">设备负责人</div>
          <div class="value">{{deviceInfo.user}}</div>
        </li>
        <li class="info-item clearfix align-right">
          <div class="name">联系方式</div>
          <div class="value">{{deviceInfo.phone}}</div>
        </li>
        <li class="info-item clearfix align-left">
          <div class="name">安装位置：</div>
          <div class="value">{{deviceInfo.address}}</div>
        </li>
        <li class="info-item clearfix align-right">
          <div class="name">GIS坐标</div>
          <div class="value">{{deviceInfo.gis}}</div>
        </li>
        <li class="info-item clearfix align-left">
          <div class="name">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注：</div>
          <div class="value">{{deviceInfo.other}}</div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import vmCommonHeader from "@/components/vm-common-header.vue";
export default {
  components: {
    "vm-common-header": vmCommonHeader
  },
  data() {
    return {
      pageTitle: this.$route.meta.pageTitle,
      goBack: this.$route.meta.goBack,
      deviceInfo: {
        code: "dkslafd554545",
        name: "设备名称dskdn",
        status: "启用",
        project: "项目A",
        user: "王津津",
        phone: "13490872378",
        address: "北京北京市昌平区某某镇某某街道某某小区xx号",
        gis: "[xxxxx]经度 [xxxxx]纬度",
        other: "备注备注"
      }
    };
  }
};
</script>
<style lang="scss" scoped>
.device-detail-info {
  background-color: #fff;
  height: 100%;
  text-align: left;
  ul {
    padding: 0 20px;
    li {
      padding: 20px;
      border-bottom: 1px solid #eee;
      line-height: 42px;
      font-size: 28px;
      color: #666;

      .name {
        width: 150px;
        float: left;
      }

      .value {
        margin-left: 150px;
      }

      &.align-right {
        .value {
          float: right;
        }
      }
    }
  }
}

.clearfix::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  clear: both;
  overflow: hidden;
  visibility: hidden;
}
</style>
